<template>
    <div>
        <br/>
        <br/>
        <br/>
        <Head ref="steps" style="size:50px"></Head>
        <el-header>上传材料信息</el-header>
        <el-collapse v-model="activeNames">
            <el-collapse-item title="身份信息" name="1">
                <div>
                    <el-form ref="uploadidcard" :model="formData" :rules="rules" size="medium" label-width="150px">
                        <el-form-item label="上传身份证正面照" prop="idcard1" required>
                            <el-upload ref="upload" :limit="1" accept=".jpg, .png" :action="upload.url"
                                :headers="upload.headers" :file-list="upload.fileList"
                                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                                :auto-upload="true" list-type="picture">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

                                <el-input v-model="formData.filePath" v-show="false"></el-input>
                                <div slot="tip" class="el-upload__tip">
                                    只能上传jpg/png文件,且不超过500kb
                                </div>
                            </el-upload>
                        </el-form-item>
                        <br>

                        <el-form-item label="上传身份证反面照" prop="idcard2" required>
                            <el-upload ref="upload" :limit="1" accept=".jpg, .png" :action="upload.url"
                                :headers="upload.headers" :file-list="upload.fileList"
                                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                                :auto-upload="true" list-type="picture">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-input v-model="formData.filePath" v-show="false"></el-input>
                                <div slot="tip" class="el-upload__tip">
                                    只能上传jpg/png文件,且不超过500kb
                                </div>
                            </el-upload>
                        </el-form-item>
                        <br>

                        <el-form-item label="上传手持身份证照片" prop="idcard3" required>
                            <el-upload ref="upload" :limit="1" accept=".jpg, .png" :action="upload.url"
                                :headers="upload.headers" :file-list="upload.fileList"
                                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                                :auto-upload="true" list-type="picture">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-input v-model="formData.filePath" v-show="false"></el-input>
                                <div slot="tip" class="el-upload__tip">
                                    只能上传jpg/png文件,且不超过500kb
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>
            </el-collapse-item>
            <el-collapse-item title="银行资料" name="2">
                <div>
                    <el-row :gutter="15">
                        <el-form ref="bankForm" :model="formData" :rules="rules" size="medium" label-width="155px">
                            <el-col :span="32">
                                <el-form-item label="收款账户开户行" prop="bankName">
                                    <el-select v-model="formData.bankName" placeholder="请选择收款账户开户行" filterable clearable
                                        :style="{ width: '100%' }">
                                        <el-option v-for="(item, index) in bankNameOptions" :key="index"
                                            :label="item.label" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>




                                <el-form-item label="收款账户开户地" prop="accountArea">

                                    <el-cascader v-model="formData.accountArea" :options="accountAreaOptions"
                                        :props="accountAreaProps" :style="{ width: '100%' }" placeholder="请选择收款账户开户地"
                                        clearable></el-cascader>
                                </el-form-item>
                                <el-form-item label="收款银行支行" prop="bankBranch">
                                    <el-input v-model="formData.bankBranch" placeholder="请输入收款银行支行" clearable
                                        :style="{ width: '100%' }">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="收款银行账户" prop="bankAccount">
                                    <el-input v-model="formData.bankAccount" placeholder="请输入收款银行账户" clearable
                                        :style="{ width: '100%' }">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                </div>
            </el-collapse-item>
            <el-collapse-item title="车辆信息" name="3">
                <div>
                    <el-form ref="carForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                        <el-form-item label="车牌号码" prop="carNumber">
                            <el-input v-model="formData.carNumber" placeholder="请输入车牌号码" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="初次登记日期" prop="carDate">
                            <el-date-picker v-model="formData.carDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{ width: '100%' }" placeholder="请选择初次登记日期" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item label="车辆品牌" prop="carBrand">
                            <el-input v-model="formData.carBrand" placeholder="请输入车辆品牌" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="车辆出厂时间" prop="carDate2">
                            <el-date-picker v-model="formData.carDate2" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{ width: '100%' }" placeholder="请选择车辆出厂时间" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item label="是否过户车" prop="carInfo">
                            <el-select v-model="formData.carInfo" placeholder="请选择是否过户车" clearable
                                :style="{ width: '100%' }">
                                <el-option v-for="(item, index) in carInfoOptions" :key="index" :label="item.label"
                                    :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车辆评估单" prop="assessment" required>
                            <el-upload ref="upload" accept=".jpg, .png,.excel,.word" :action="upload.url"
                                :headers="upload.headers" :file-list="upload.fileList"
                                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                                :auto-upload="true" multiple>
                                <el-button size="small" type="primary" icon="el-icon-upload">点击上传车辆评估单</el-button>
                                <el-input v-model="formData.filePath" v-show="false"></el-input>
                                <div slot="tip" class="el-upload__tip">
                                    只能上传不超过 2MB 的文件
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>
            </el-collapse-item>
            <el-collapse-item title="房产信息" name="4" font-weight="bold">
                <div>
                    <el-form ref="houseForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                        <el-form-item label="权利人" prop="houseMaster">
                            <el-input v-model="formData.houseMaster" placeholder="请输入权利人" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="房地产名称" prop="houseName">
                            <el-input v-model="formData.houseName" placeholder="请输入房地产名称" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="房地产证号" prop="houseId">
                            <el-input v-model="formData.houseId" placeholder="请输入房地产证号" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="登记价" prop="registerValue">
                            <el-input v-model="formData.registerValue" placeholder="请输入登记价" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="现估价" prop="nowValue">
                            <el-input v-model="formData.nowValue" placeholder="请输入现估价" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="面积" prop="area">
                            <el-input v-model="formData.area" placeholder="请输入面积" clearable :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="按揭银行/机构" prop="mortgage">
                            <el-input v-model="formData.mortgage" placeholder="请输入按揭银行/机构" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="贷款金额" prop=" loanAmount">
                            <el-input v-model="formData.loanAmount" placeholder="请输入贷款金额" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="房产评估单" prop="houseAssessment" required>
                            <el-upload ref="upload" accept=".jpg, .png,.excel,.word" :action="upload.url"
                                :headers="upload.headers" :file-list="upload.fileList"
                                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                                :auto-upload="true" multiple>
                                <el-button size="small" type="primary" icon="el-icon-upload">点击上传房产评估单</el-button>
                                <el-input v-model="formData.filePath" v-show="false"></el-input>
                                <div slot="tip" class="el-upload__tip">
                                    只能上传不超过 2MB 的文件
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>
            </el-collapse-item>
        </el-collapse>
        <br />
        <br />
        <br />
        <el-form>
            <el-form-item align="center">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>

import uploadFile from "@/api/apply3/upload";
import { getToken } from "@/utils/auth";
import Head from "../loan/loanHead.vue";

export default {
    components: {},
    props: [],
    data() {

        return {
            activeNames: ['1'],

            formData: {
                bankName: "蜗牛银行",
                bankuser: "",
                accountArea: [],
                bankBranch: undefined,
                bankAccount: undefined,
                carNumber: undefined,
                carDate: null,
                carBrand: undefined,
                carDate2: null,
                carInfo: undefined,
                assessment: null,
                houseMaster: undefined,
                houseName: undefined,
                houseId: undefined,
                registerValue: undefined,
                nowValue: undefined,
                area: undefined,
                mortgage: undefined,
                loanAmount: undefined,
                houseAssessment: null,
                filePath: null,


            },

            upload: {
                // 是否禁用上传
                isUploading: false,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/common/upload",
                // 上传的文件列表
                fileList: [],
            },

            testAction: "http://localhost:81/dev-api/common/upload",
            testfileList: [],

            rules: {
                bankName: [
                    {
                        required: true,
                        message: "请选择收款账户开户行",
                        trigger: "change",
                    },
                ],
            },
            bankNameOptions: [
                {
                    label: "中国工商银行",
                    value: "中国工商银行",
                },
                {
                    label: "中国银行",
                    value: "中国银行",
                },
                {
                    label: "中国建设银行",
                    value: "中国建设银行",
                },
                {
                    label: "中国农业银行",
                    value: "中国农业银行",
                },
                {
                    label: "交通银行",
                    value: "交通银行",
                },
                {
                    label: "招商银行",
                    value: "招商银行",
                },
                {
                    label: "中国民生银行",
                    value: "中国民生银行",
                },
                {
                    label: "中国光大银行",
                    value: "中国光大银行",
                },
                {
                    label: "华夏银行",
                    value: "华夏银行",
                },
                {
                    label: "中信银行",
                    value: "中信银行",
                },
            ],
            houseMaster: [
                {
                    required: true,
                    message: "请输入权利人",
                    trigger: "blur",
                },
            ],
            houseName: [
                {
                    required: true,
                    message: "请输入房地产名称",
                    trigger: "blur",
                },
            ],
            houseId: [
                {
                    required: true,
                    message: "请输入房地产证号",
                    trigger: "blur",
                },
            ],
            registerValue: [
                {
                    required: true,
                    message: "请输入登记价",
                    trigger: "blur",
                },
            ],
            nowValue: [
                {
                    required: true,
                    message: "请输入现估价",
                    trigger: "blur",
                },
            ],
            area: [
                {
                    required: true,
                    message: "请输入面积",
                    trigger: "blur",
                },
            ],
            mortgage: [
                {
                    required: true,
                    message: "请输入按揭银行/机构",
                    trigger: "blur",
                },
            ],
            loanAmount: [
                {
                    required: true,
                    message: "请输入贷款金额",
                    trigger: "blur",
                },
            ],
            carNumber: [
                {
                    required: true,
                    message: "请输入车牌号码",
                    trigger: "blur",
                },
            ],
            carDate: [
                {
                    required: true,
                    message: "请选择初次登记日期",
                    trigger: "change",
                },
            ],
            carBrand: [
                {
                    required: true,
                    message: "请输入车辆品牌",
                    trigger: "blur",
                },
            ],
            carDate2: [
                {
                    required: true,
                    message: "请选择车辆出厂时间",
                    trigger: "change",
                },
            ],
            carInfo: [
                {
                    required: true,
                    message: "请选择是否过户车",
                    trigger: "change",
                },
            ],

            bankuser: [
                {
                    required: true,
                    message: "请输入收款账户名",
                    trigger: "blur",
                },
            ],
            accountArea: [
                {
                    required: true,
                    type: "array",
                    message: "请至少选择一个accountArea",
                    trigger: "change",
                },
            ],
            bankBranch: [
                {
                    required: true,
                    message: "请输入收款银行支行",
                    trigger: "blur",
                },
            ],
            bankAccount: [
                {
                    required: true,
                    message: "请输入收款银行账户",
                    trigger: "blur",
                },
            ],
            accountAreaOptions: [
                {
                    label: "四川省",
                    value: 1,
                    id: 101,
                    children: [
                        {
                            label: "成都市",
                            value: 2,
                            id: 102,
                            children: [
                                {
                                    label: "武侯区",
                                    value: 3,
                                    id: 103,
                                },
                            ],
                        },
                    ],
                },
            ],

            carInfoOptions: [
                {
                    label: "是",
                    value: 1,
                },
                {
                    label: "不是",
                    value: 2,
                },
            ],
            accountAreaProps: {
                multiple: false,
            },
        };
    },
    computed: {},
    watch: {},
    components:{ Head },
    created() {
        setTimeout(() => {
            this.$refs.steps.active = 2;
        }, 10);
    },
    mounted() { },
    methods: {
        //信息提交
        submitForm(response) {
            this.$refs['bankForm'].validate(valid => {
                if (valid) {
                    uploadFile(this.formData).then(res => {
                    }).catch;
                }
            });
            this.$refs['carForm'].validate(valid => {
                if (valid) {
                    uploadFile(this.formData).then(res => {
                    }).catch;
                }
            });
            this.$refs['houseForm'].validate(valid => {
                if (valid) {
                    uploadFile(this.formData).then(res => {
                    }).catch;
                }
            });
            this.$message.success(response.msg);
            this.$router.replace({ path: "/ApplySuccess" });
        },
        // 文件提交处理
        submitUpload() {
            this.$refs.upload.submit();
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.isUploading = false;
            this.formData.filePath = response.fileName;
            this.$message.success(response.msg);
            //this.msgSuccess(response.msg);
        },
        handleAdd() {
            this.upload.fileList = [];
        },

        handleUpdate(row) {
            this.upload.fileList = [
                { name: this.form.fileName, url: this.form.filePath },
            ];
        },
        resetForm(formData) {
            this.$refs[formData].resetFields();
        },
    },
};
</script>
<style>
.el-upload__tip {
    line-height: 1.2;
}

.el-collapse-item {
    margin: 0 auto;
    line-height: 20px;

    width: 700px;
}

.el-form-item {
    margin: 0 auto;
    line-height: 20px;
    align-content: center;
}

.el-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
    text-decoration-color: cornflowerblue;
    font-weight: bolder;
}
</style>
  